<template>
	<view class="container">
		<swiper class="detail-banner" :indicator-dots="true" circular :autoplay="true" :interval="3000"
			:duration="1000">
			<swiper-item v-for="banner in pics" :key="banner.id">
				<image :src="banner.pic" mode="scaleToFill"></image>
			</swiper-item>

		</swiper>
		<view class="item-info">

			{{basicInfo.name}}
		</view>
		<view class="content" v-html="content">
		</view>
	</view>

	<view class="actions">
		<uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick"
			@buttonClick="buttonClick" />
	</view>
	
	<!-- 商品规格弹窗 -->
	<uni-popup ref="popup" type="bottom">
		<view class="" style="height: 40vh; background-color: #fff;">
			<view class="item-sku">
				<image :src="sku.pic" mode="scaleToFill"></image>
				<view class="item-info">
					{{sku.name}}
					价格:￥{{sku.minPrice}}
					数量：{{sku.number}}
					<view class="">
						<uni-number-box v-model="sku.number" :min="1" ></uni-number-box>
					</view>
				</view>
			</view>
			<button type="default" @click="clickConfirmBtn">确定</button>
		</view>
	</uni-popup>
	<!-- /商品规格弹窗 -->
</template>

<script>
	export default {
		data() {
			return {
				basicInfo: {},
				content: "",
				pics: [],
				// 商品规格
				sku: {},
				options: [ {
					icon: 'home',
					text: '首页',
				}, {
					icon: 'cart',
					text: '购物车',
					info: 2
				}],
				buttonGroup: [{
						text: '加入购物车',
						backgroundColor: '#ff0000',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: '#ffa200',
						color: '#fff'
					}
				],
				actionIndex: 0 // 0点击加入购物车 1 点击 立即购买
			}
		},
		methods: {
			clickConfirmBtn(){
				// 点击商品规格确定按钮 
				if (this.actionIndex === 0) {
					// 加入购物车
					// 加入购物车 
					this.$request('/shopping-cart/add', {
						method: 'POST',
						data: {
							goodsId: this.sku.id,
							number: this.sku.number
						}
					}).then(res => {
						if (res.code === 0) {
							uni.showToast({
								title:"加入购物车成功",
								success: () => {
									uni.switchTab({
										url: "/pages/cart/cart"
									})
								}
							})
						}
					})
				} else {
					console.log('确定购买');
				}
				// 弹窗关闭
				this.$refs.popup.close()
			},
			onClick(e){
				if(e.index === 0) {
					uni.switchTab({
						url: "/pages/home/home"
					})
				} else {
					uni.switchTab({
						url: "/pages/cart/cart"
					})
				}
			},
			buttonClick(e){
				this.actionIndex = e.index;
				this.$refs.popup.open();
				
			},
			getDetail(id) {
				this.$request('/shop/goods/detail', {
					data: {
						id
					}
				}).then(res => {
					if (res.code === 0) {
						const {
							basicInfo,
							content,
							pics
						} = res.data;
						this.basicInfo = basicInfo;
						this.content = content.replace(/<img/gi, "<img style='display:block;width:100%'");
						this.pics = pics;
						this.sku = {
							...basicInfo,
							number: 1
						}
						uni.setNavigationBarTitle({
							title: basicInfo.name
						})
					}
				})
			}
		},
		onLoad(options) {
			this.getDetail(options.id)
		}
	}
</script>

<style lang="scss" scoped>
	.detail-banner {
		width: 750rpx;
		height: 375rpx;

		image {
			width: 750rpx;
			height: 375rpx;
		}
	}

	.container {
		padding-bottom: 50px;
	}
	.actions{
		position: fixed;
		width: 100%;
		left: 0;
		bottom: 0;
		z-index: 100;
	}
	.item-sku{
		display: flex;
		align-items: center;
		image{
			width: 180rpx;
			height: 180rpx;
		}
		.item-info{
			flex: 1;
		}
	}
</style>